<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确认要删除该条数据吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>
    <div class="data-content">
      <el-row style="height: 100%;min-height: 500px;" :gutter="20">
        <el-col :span="4" class="goods_content_l">
          <span class="title">{{treeTitle}}
            <i v-if="treeTitle != '部门管理'" class="el-icon-close" @click="chooseDepartment"></i>
          </span>
          <div class="tree">
            <el-tree ref="orgTree" :highlight-current="true" :expand-on-click-node="false" :data="structureOptions" :props="defaultProps"
              @node-click="chooseDepartment">
              <span class="custom-tree-node jk" slot-scope="{ node, data }">
                <span>{{data.name}}</span>
              </span>
            </el-tree>
          </div>

        </el-col>
        <el-col :span="20" class="right-content">
          <div class="department">
            <el-row>
              <el-col :span="20">
                {{treeTitle}} {{tableData.total}}人
              </el-col>
            </el-row>
          </div>
          <div class="tool-add">
            <el-button size="mini" @click="addView">新增</el-button>
          </div>

          <el-table v-loading="loading" :data="tableData.list" @sort-change="changeTableSort"
            style="width: 100%;font-size: 12px;">
            <el-table-column label="姓名" prop="name" width="100">
            </el-table-column>
            <el-table-column label="职位" prop="job" width="100">
            </el-table-column>
            <el-table-column label="email" prop="email" width="160">
            </el-table-column>
            <el-table-column label="电话" prop="phone" width="100">
            </el-table-column>
            <el-table-column label="所在部门" prop="structureName" width="100">
            </el-table-column>
            <el-table-column label="数据范围" prop="dataScopeName">
            </el-table-column>



            <el-table-column width="180" align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini" icon="el-icon-info" @click="show(scope.row)">详情
                </el-button>
                <el-button type="text" size="mini" icon="el-icon-edit" @click="editView(scope.row)">编辑
                </el-button>
                <el-button type="text" icon="el-icon-delete" class="danger" size="mini" style="cursor: pointer;"
                  @click="deleteData(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="page">
            <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
              :page-size="tableData.size" :pager-count="5" layout="total, sizes, prev, pager, next, jumper"
              :page-count="tableData.totalPage" :total="tableData.total" @size-change="sizeChange"
              @current-change="pageChange">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import common from "@/mixins/common.js";
  var config = {};


  config.methods = {};
  config.methods.addView = function () {
    this.$router.push({
      path: 'add'
    });
  }
  config.methods.auditView = function (row) {
    this.selectData = row;
    this.auditVisible = true;
    this.form.name = row.name;
    this.form.logo = row.logo;
    this.form.id = row.id;

    this.form.auditState = "";
  }


  config.methods.editView = function (row) {
    var data = {};
    data.id = row.id;
    this.$router.push({
      path: 'update',
      query: data
    });

  }

  config.methods.changeTableSort = function (column) {
    this.searchObject.sortField = column.prop;
    if ("descending" == column.order) {
      this.searchObject.sortMethod = "desc";
    } else if ("ascending" == column.order) {
      this.searchObject.sortMethod = "asc";
    } else {
      this.searchObject.sortMethod = "";
    }
    this.getSearchList();
  }
  config.methods.show = function (row) {
    var param = {};
    param.id = row.id;
    this.$router.push({
      path: 'view',
      query: param
    });

  }

  config.methods.handleSelect = function (index) {
    if (index == "1") {
      this.searchObject.auditState = "checked"
    } else if (index == "2") {
      this.searchObject.auditState = "wait"
    } else if (index == "3") {
      this.searchObject.auditState = "fail"
    } else {
      this.searchObject.auditState = ""
    }
    this.activeIndex = index;
    this.getSearchList();
  }

  config.methods.sizeChange = function (event) {
    this.searchObject.size = event;
    this.getSearchList();
  }
  config.methods.pageChange = function (index) {
    this.searchObject.no = index;
    this.getSearchList();
  }
  config.methods.getSearchList = function () {
    this.loading = true;
    var data = this.searchObject;
    var self = this;
    this.postData("/tenantRest/staff/search.htm", data, function (result) {
      if (result.code == 0) {
        self.tableData = result;
      }
      setTimeout(function () {
        self.loading = false;
      }, 300)
    });
  }
  config.methods.search = function () {
    this.searchObject.no = 1;
    this.getSearchList();
  }
  config.methods.clearData = function () {
    this.searchObject.name = "";
    this.searchObject.address = "";
    this.searchObject.shopState = "";
  }
  config.methods.deleteData = function (event) {
    this.selectId = event.id;
    this.dialogVisible = true;
  }

  config.methods.handleClose = function () {
    this.dialogVisible = false;
    var self = this;
    if (self.selectId) {
      var params = {};
      params.id = self.selectId;
      this.postData("/tenantRest/staff/delete.htm", params, function (res) {
        if (res.code == 0) {
          self.$message({
            message: '删除数据成功',
            type: 'success'
          });
          self.getSearchList();
        } else {
          self.$message.error(res.msg);
        }
      });
    }

  }

  config.computed = {};

  config.data = function () {
    return {
      searchObject: {
        no: 1,
        size: 10,
        name: '',
        phone: ''
      },
      structureOptions: [],
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeTitle: '部门管理',
      loading: false,
      tableData: {},
      defaultProps: {
        emitPath: false,
        checkStrictly: true,
        children: 'children',
        label: 'name',
        value: 'id'
      },
    }
  };
  config.methods.showAddView = function () {
    this.$router.push({
      path: 'add'
    });
  };

  config.methods.loadStructureOptions = function () {
    var self = this;
    var param = {};
    param.sortMethod = "asc";
    param.sortField = "id";
    param.level = 1;
    param.size = 500;
    param.fetch = 0;
    this.postData("/tenantRest/organization/list.htm", param, function (result) {
      if (result.code == 0) {
        self.structureOptions = result.list;
      }
    });
  }

    config.methods.chooseDepartment = function (data) {
        if (data == undefined) {
            this.getSearchList();
            return;
        }
        if (!data.id) {
            this.treeTitle = '部门管理';
            //this.parentId="";
            //this.$refs.tree.setChecked([]);
            //$(".is-focusable").removeClass("is-current");
            //this.getSearchList();
            //this.$refs.orgTree.setCurrentKey(null);
        } else {
            this.treeTitle = data.name;
        }
        this.parentId = data.id;
        this.searchObject.structure = data.id;
        this.searchObject.no = 1;
        this.loading = true;
        var that = this;
        this.getSearchList();
    }

  config.mounted = function () {
    this.loadStructureOptions();
    this.getSearchList();
  }
  config.mixins = [common];

  export default config;
</script>

<style scoped>
		.goods_content_l .tree {
			background-color: #f9f9f9;
			height: 100%;
			padding: 10px 0;
		}

		.goods_content_l .title {
			line-height: 40px;
			cursor: pointer;
			display: block;
			background-color: #f9f9f9;
			margin-bottom: 10px;
			padding-left: 20px;
		}

		.goods_content_l .title i {
			float: right;
			margin: 14px;
		}

		.goods_content_l .el-tree {
			background-color: transparent;
		}

		.goods_content_l .el-tree .el-tree-node__label {
			font-size: 13px;
			font-weight: bold;
		}

		.goods_content_l .el-tree-node {
			margin: 5px 0;
		}

		.goods_content_l .el-tree-node__content:hover {
			background-color: #f9f9f9;
		}

		.el-tree-node__content {
			padding: 0 10px !important;
		}

		.el-tree-node__content>label.el-checkbox {
			position: absolute;
			right: 15px;
		}

		.is-current>.el-tree-node__content {
			background-color: #2984EF !important;
			color: #fff;
		}

		.custom-tree-node i {
			position: absolute;
			right: 14px;
			display: none;
			overflow: hidden;
		}

		.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content i {
			display: inline-block;
		}

		.department {
			line-height: 40px;
		}

		.right-content {
			padding-left: 15px;
			border-left: solid 1px #E6E8EE;
		}

		.el-table td {
			padding: 5px 0px;
		}
		.el-cascader{
			width: 100%;
		}
</style>